<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <h1 class="logo">LOGO</h1>
        <p class="slogan">欢迎来到产商品AI智配精灵</p>
      </div>

      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        label-width="0px"
      >
        <div class="form-item">
          <el-input
            v-model="loginForm.username"
            type="text"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user"
            :disabled="isLoading"
          >
          </el-input>
        </div>

        <div class="form-item">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            :disabled="isLoading"
          >
          </el-input>
        </div>

        <div class="form-extra">
          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>

        <el-button
          type="primary"
          class="login-btn"
          :loading="isLoading"
          @click="handleLogin"
        >
          立即登录
        </el-button>
      </el-form>

      <div class="other-login">
        <p>其他方式登录</p>
        <div class="social-buttons">
          <el-button type="primary" icon="el-icon-google" circle></el-button>
          <el-button type="danger" icon="el-icon-twitter" circle></el-button>
          <el-button type="success" icon="el-icon-wechat" circle></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();
const loginFormRef = ref();
const loginForm = reactive({
  username: "",
  password: "",
});

const rememberMe = ref(false);
const isLoading = ref(false);

// 表单验证规则
const loginRules = reactive({
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在3-20个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 30, message: "长度在6-30个字符", trigger: "blur" },
  ],
});

const handleLogin = async () => {
  const isValid = await loginFormRef.value?.validate();
  if (!isValid) return;

  isLoading.value = true;
  try {
    // 模拟登录请求
    await new Promise((resolve) => setTimeout(resolve, 1500));

    // 登录成功逻辑
    ElMessage.success("登录成功");
    rememberMe.value &&
      localStorage.setItem("userInfo", JSON.stringify(loginForm));
    router.push("/input");
  } catch (error) {
    ElMessage.error("登录失败，请重试");
  } finally {
    isLoading.value = false;
  }
};

// 记住密码逻辑
watch(
  () => rememberMe.value,
  (val) => {
    if (!val) localStorage.removeItem("userInfo");
  }
);

// 自动填充记住的密码
onMounted(() => {
  const userInfo = localStorage.getItem("userInfo");
  userInfo && Object.assign(loginForm, JSON.parse(userInfo));
});
</script>

<style scoped lang="less">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #409eff, #67c23a);
  font-family: "PingFang SC", sans-serif;

  .login-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 48px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;

    .login-header {
      text-align: center;
      margin-bottom: 32px;

      .logo {
        font-size: 24px;
        font-weight: bold;
        color: #409eff;
        margin-bottom: 8px;
        transition: all 0.3s;
        &:hover {
          transform: scale(1.05);
        }
      }

      .slogan {
        color: #666;
        font-size: 14px;
      }
    }

    .login-form {
      .form-item {
        margin-bottom: 24px;

        .el-input {
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          transition: all 0.3s;

          &:focus-within {
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }

          .el-input__prefix {
            color: #409eff;
            font-size: 18px;
          }

          .el-input__inner {
            padding-left: 40px;
          }
        }
      }

      .form-extra {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 16px 0;
        font-size: 14px;

        .forgot-password {
          color: #409eff;
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }

      .login-btn {
        width: 100%;
        height: 48px;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        transition: transform 0.3s;
        &:hover {
          transform: translateY(-2px);
        }
      }
    }

    .other-login {
      margin-top: 32px;
      text-align: center;

      p {
        color: #999;
        margin-bottom: 16px;
      }

      .social-buttons {
        display: flex;
        justify-content: center;
        gap: 16px;

        .el-button {
          width: 48px;
          height: 48px;
          font-size: 20px;
          transition: all 0.3s;
          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
</style>
